<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>MDUI</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta content="telephone=no,email=no" name="format-detection">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../statics/mdui/css/mdui.min.css">
	<script type="text/javascript" src="../statics/common/js/header.js"></script>
	<style type="text/css">
	    html { height: 100%; }
	    body { min-height: 100%; }
	    .mdui-bar-nav { border-bottom: 1px solid #ddd; }
		.md-content { position: absolute; z-index: 10; left: 0; top: 0.880rem; width: 100%; }
	</style>
</head>

<body>
	<div class="mdui-bar mdui-bar-nav" id="header">
		<a class="mdui-icon mdui-icon-bars mdui-pull-left mdui-plus-visible"></a>
		<h1 class="mdui-title">Hello mdui</h1>
	</div>
	<div class="md-content" id="md_content"></div>
	<script src="../statics/mdui/js/mdui.min.js"></script>
	<script src="../statics/common/js/mdlife.js"></script>
	<script src="../statics/common/js/common.js"></script>
	<script>
	Base.ready(function() {
		if(Base.isPC() === true) {
			pcForward();
		} else {
			var h = document.body.clientHeight;
			var headerH = document.getElementById('header').offsetHeight;
			document.getElementById("md_content").style.height = (h - headerH) + "px";
			Base.openFrameByEle("md_content", {name: "mui_list", url: "wgt://mdui/list.html", bounces: false});
		}
	});
    function pcForward() {
	    var menu = null,
		   main = null;
		var showMenu = false;
		mdui.init({
			swipeBack: false,
			statusBarBackground: '#f7f7f7',
			gestureConfig: {
				doubletap: true
			},
			subpages: [{
				id: 'list',
				url: 'list.html',
				styles: {
					top: '45px',
					bottom: 0,
					bounce: 'vertical'
				}
			}]
		});
    }	
	</script>
</body>

</html>